<template>
  <div class="container">
    <div class="w1420">
      <div class="ad-img">
        <img :src="adImg" alt @click="gotoApply" />
      </div>
    </div>
    <div class="title-box">
      <div class="w1420 flexRow Xbetween">
        <div class="left">
          <div class="position">当前位置： 首页 > 本届作品 > 作品详情</div>
          <div class="title">{{ info.project_name }}</div>
          <div class="info">
            <span>时间：{{ info.create_time }}</span>
            <span>类型：{{ info.category }}</span>
            <span>地区：{{ info.region }}</span>
          </div>
        </div>
        <div class="right flexCol Xbetween">
          <div class="flexRow Ycenter">
            <img class="headimg" :src="info.head_img" alt />
            <div>
              <div style="margin-bottom: 18px">
                <span class="name">{{ info.name }}</span>
                <img
                  class="seximg"
                  :src="
                    info.sex == '0'
                      ? require('../../assets/img/woman-icon.png')
                      : require('../../assets/img/man-icon.png')
                  "
                  alt
                />
              </div>
              <div class="info">
                <span>{{ info.nation }}</span>
                <span>{{ info.age }}</span>
                <span>{{ info.culture }}</span>
              </div>
            </div>
          </div>
          <div class="info">
            <span>学校：{{ info.school }}</span>
            <span>指导老师：{{ info.advisor }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box">
      <div class="w1200">
        <div class="content">{{ info.desc }}</div>
        <div class="p-video" v-if="info.video">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
        <!-- <video v-if="info.video" :src="info.video"></video> -->
        <img
          class="works-img"
          v-for="(item, index) in info.img"
          :key="index"
          :src="item"
          alt
        />
        <el-divider>
          <span class="divider-text"
            >非特殊说明，本FangMingJia.com上的作品均为作者原创，原作品版权归属原作者</span
          >
        </el-divider>
        <div class="btn-group flexRow Xcenter">
          <div
            class="btn flexCol Xcenter Ycenter pointer"
            @click="goodClick(info.good)"
          >
            <img src="../../assets/img/like-icon.png" alt />
            <div>{{ info.good_count }} 赞</div>
          </div>
          <div
            class="btn flexCol Xcenter Ycenter pointer"
            @click="favoriteClick(info.favorite)"
          >
            <img src="../../assets/img/collect-icon.png" alt />
            <div>收藏 {{ info.favorite_count }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="w1420">
      <div class="interest-box">
        <div class="title">猜你喜欢</div>
        <div class="list flexWarp">
          <div
            class="item pointer"
            v-for="(item, index) in interestList"
            :key="index"
            @click="gotoDetail(item.id)"
          >
            <img :src="item.img" alt />
            <div class="content">
              <div class="title">{{ item.project_name }}</div>
              <div class="desc flexRow Xbetween">
                <span>{{ item.cname }}</span>
                <span>{{ item.rname }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ad } from '../../api/home'
import { worksInfo, interestList, favoriteAdd, goodAdd } from '../../api/detail'
export default {
  data() {
    return {
      adImg: '',
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0, 4.0, 8.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: '',
            src: '' //url地址
          }
        ],
        //poster: "../assets/img/home_top.jpg", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true //全屏按钮
        }
      },
      info: {},
      interestList: []
    }
  },
  computed: {
    id() {
      return this.$route.query.id
    },
    userInfo: {
      get() {
        return this.$store.getters.userInfo
      }
    }
  },
  mounted() {
    this.getAd()
    this.getDetail()
    this.getInterestList()
  },
  methods: {
    // 推广图
    getAd() {
      ad({
        type: 'top'
      }).then((res) => {
        this.adImg = res.data.advertisement
      })
    },
    gotoApply() {
      if (JSON.stringify(this.userInfo) != '{}') {
        this.$router.push({ path: '/apply' })
      } else {
        // 呼出登录弹框
        this.$store.dispatch('settings/changeSetting', {
          key: 'loginDialogFormVisible',
          value: true
        })
      }
    },
    getDetail() {
      worksInfo({ id: this.id }).then((res) => {
        this.info = res.data
        let videoList = []
        this.info.video.forEach((item) => {
          videoList.push({
            type: '',
            src: item //url地址
          })
        })
        this.playerOptions.sources = videoList
        if (this.info.category == 1) {
          this.info.category = '科创'
        } else if (this.info.category == 2) {
          this.info.category = '文创'
        }
        if (this.info.region == 1) {
          this.info.region = '中国'
        } else if (this.info.region == 2) {
          this.info.region = '国际'
        }
      })
    },
    getInterestList() {
      interestList().then((res) => {
        this.interestList = res.data
      })
    },
    goodClick(status) {
      goodAdd({
        pervious_works_id: this.info.id
      }).then(() => {
        if (status == 0) {
          this.info.good = 1
          this.info.good_count = this.info.good_count + 1
        } else {
          this.info.good = 0
          this.info.good_count = this.info.good_count - 1
        }
      })
    },
    favoriteClick(status) {
      favoriteAdd({
        pervious_works_id: this.info.id
      }).then(() => {
        if (status == 0) {
          this.info.favorite = 1
          this.info.favorite_count = this.info.favorite_count + 1
        } else {
          this.info.favorite = 0
          this.info.favorite_count = this.info.favorite_count - 1
        }
      })
    },
    gotoDetail(id) {
      this.$router.push({
        path: '/worksDetail',
        query: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #f7f9fd;
  padding: 30px 0 80px;
  .ad-img {
    text-align: center;
    img {
      width: 100%;
      // height: 250px;
    }
  }
  .title-box {
    border-top: 1px solid #dddddd;
    margin-top: 30px;
    .left {
      padding: 30px 0;
      .position {
        font-size: 20px;
        color: #999999;
      }
      .title {
        margin: 40px 0 30px;
        font-size: 40px;
        color: #262626;
      }
    }
    .right {
      padding: 30px 0;
      padding-left: 40px;
      border-left: 1px solid #dddddd;
      .headimg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-right: 26px;
      }
      .name {
        font-size: 26px;
        color: #262626;
        margin-right: 10px;
      }
      .seximg {
        width: 24px;
        height: 24px;
        vertical-align: text-bottom;
      }
    }
    .info {
      span {
        font-size: 20px;
        color: #999999;
        margin-right: 20px;
      }
    }
  }
  .content-box {
    background: #ffffff;
    padding: 60px 0;
    padding-bottom: 99px;
    margin-bottom: 59px;
    .w1200 {
      width: 1200px;
      margin: 0 auto;
    }
    .content {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #262626;
      line-height: 48px;
      margin-bottom: 60px;
    }
    .p-video {
      width: 100%;
      margin-bottom: 60px;
    }
    .works-img {
      width: 100%;
      margin-bottom: 60px;
    }
    .divider-text {
      font-size: 16px;
      color: #999999;
    }
    .btn-group {
      .btn {
        width: 134px;
        height: 70px;
        background: #9ba5af;
        border-radius: 35px;
        font-size: 16px;
        color: #ffffff;
        margin-top: 56px;
        &:last-child {
          background: linear-gradient(90deg, #3174ff 0%, #12abff 100%);
          box-shadow: 0px 10px 20px 0px rgba(51, 133, 255, 0.3);
          margin-left: 60px;
        }
        img {
          width: 28px;
          height: 28px;
        }
      }
    }
  }
  .interest-box {
    .title {
      font-size: 24px;
      color: #262626;
    }
    .list {
      padding: 29px 0 0;
      .item {
        width: 334px;
        background: #ffffff;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
        margin-left: 28px;
        &:nth-child(4n + 1) {
          margin-left: 0;
        }
        img {
          width: 100%;
          height: 240px;
        }
        .content {
          padding: 24px 22px;
          .title {
            font-size: 20px;
            color: #262626;
            margin-bottom: 60px;
          }
          .desc {
            font-size: 16px;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>